<template>
	<view class="pages">
		<!-- 头部 -->
		<page_head>系统公告</page_head>

		<!-- 主体 -->
		<view class="">
			<view class="notice">
				<view class="notice-wrapper">
					<view class="initNoData" v-if="noticeList.length == 0">暂无数据~</view>
					<scroll-view scroll-y="true" class="notice-height"  @scrolltolower="lower" v-else>
						<view class="notice-list" v-for="(item,index) in noticeList" :key="index" :class="[item.is_read  == 2 ? 'notice-list--opacity' : '']">
							<view class="notice-time">{{ item.cre_date }}</view>
							<view class="notice-item">
								<view class="notice-title">{{ item.notice_title }}</view>
								<!-- <view class="notice-content">{{ item.notice_content }}</view> -->
								<view class="notice-details" @tap.stop="$tools.jump('/pages/notice/noticeDetails',item.id,(JSON.stringify(item)))">
									<span class="details">查看详情</span>
									<image class="next" :src="IMAGE_STATIC+'/images/next-grey.png'" mode=""></image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import page_head from '@/components/page_head.vue'
	export default {
		components: {
			page_head
		},
		data() {
			return {
				IMAGE_STATIC: this.$url.assetsPath,
				pageIndex: 1,
				pageSize: 10,
				lastId:'',
				noticeList: [],
				lsShow:false, // 是否有分页
			}
		},
		onLoad() {
			this.init()
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('refresh');
			this.init()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			init(){
				this.lastId = ''
				this.noticeList = [];
				this.getnoticemsg()
			},
			// 公告列表
			getnoticemsg() {
				this.$Ajax('/api/system/notice/getSysNoticeList', {
					last_id:this.lastId
				},
				res => {
					if(res.success){
						this.noticeList =this.noticeList.concat(res.data.sysNoticeList);
						if(res.data.sysNoticeList.length>0){
							this.lastId = res.data.sysNoticeList[res.data.sysNoticeList.length-1].id
							this.lsShow = true
						}else{
							this.lsShow = false
						}
					}
				}, err => {
					console.log(err);
				})
			},
			lower(e) {
				console.log("ddd",this.lsShow)
				if (this.lsShow) {
					this.getnoticemsg();
				} else {
					return this.$tools.toast('到底了');
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pages{
	height: 100vh;
}
	.notice {
		overflow: hidden;
		&-wrapper {
			@include flexLeftColumn;
		}
		&-height{
			height: calc(100vh - 80rpx);
		}
		&-list {
			@include flexCenterColumn;
			margin-top: 32rpx;
			width: 100%;
		}
		&-list:nth-of-type(1){
			// margin-top: 0;
		}

		&-time {
			font-size: 24rpx;
			color: #666666;
			line-height: 48rpx;
			text-align: center;
		}

		&-item {
			background: $globalColor-white;
			padding: 32rpx;
			width: 93.6%;
			margin: auto;
			margin-top: 24rpx;
		}

		&-title {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: $globalColor-fontStyle;
		}

		&-content {
			font-size: 28rpx;
			color: #333;
			word-break: break-all;
		}

		&-details {
			@include flexBetween;
			margin-top: 30rpx;
			padding-top: 30rpx;
			border-top: 1px solid $globalColor-border;
			.details {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: $globalColor-fontStyle;
			}

			.next {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
</style>
